<template>
    <div class="home">
        <SliderBarComp></SliderBarComp>
        <div>
            <NavBarComp></NavBarComp>
            <ContentComp></ContentComp>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted } from 'vue'

import SliderBarComp from '@/layout/SliderBar/index.vue'
import NavBarComp from '@/layout/NavBar/index.vue'
import ContentComp from '@/layout/Content/index.vue'

export default defineComponent({
    name: 'HomePage',
    components: {
        SliderBarComp,
        NavBarComp,
        ContentComp
    },
    setup() {
        const components = {}
        const constant = {}
        const state = reactive({})

        const methods = {}
        return {
            ...components,
            ...constant,
            ...methods,
            ...toRefs(state)
        }
    }
})
</script>
<style lang="scss" scoped>
.home {
    width: 100vw;
    height: 100vh;
    overflow: auto;
    .drag-comp {
        height: 50%;
    }
    .table-comp {
        height: 50%;
    }
    .table-up-row {
        margin-bottom: 20px;
    }
}
</style>
